<template>
  <div class="mine qx_mine padding-lr20">
    <!--  -->
    <div class="header flex justify-between">
      <img
        class="radius-50p margin-r24"
        @click="$router.push({name: 'perfectSet'})"
        :src="user.logo ? user.logo: $nologin"
        alt
      />
      <div class="flex-grow flex flex-column text-ff justify-around">
        <div class="rem-36px" @click="$router.push({name: 'perfectSet'})">{{user.enterprise_title}}</div>
        <div class="rem-24px auth" @click="auth">
          {{ent.grade_name}}
          <span v-if="ent.grade_id>=1&&ent.year_num">({{ent.year_num}}年)</span>
          <span v-if="ent.grade_id>=1&&ent.end_time">(有效期至{{ent.end_time}})</span>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="card bg-ff rem-36px margin-b20" @click="qxgo">
      <i class="iconfont icon-lou"></i>
      &nbsp;企业名片
    </div>
    <!--  -->
    <div class="bg-ff ability margin-b20">
      <div class="rem-36px ability_title">常用功能</div>
      <div class="flex text-center rem-26px text-content flex-wrap gn">
        <!--  -->
        <div @click="perfect">
          <img src="@/assets/img/gxname.png" alt />
          <div>公司信息</div>
        </div>
        <div @click="auth">
          <img src="@/assets/img/auth.png" alt />
          <div>公司认证</div>
        </div>
        <div @click="to('/recruitApply')">
          <img src="@/assets/img/mine1.png" alt />
          <div>招商申请 ({{user.business_num}})</div>
        </div>
        <!--  -->
        <div @click="to('/infoApply')">
          <img src="http://img.ilianpei.com/2020-08-19/15978179445f3cc45813b05.png" alt />
          <div>资讯申请 ({{user.article_num}})</div>
        </div>
        <!--  -->
        <div @click="to('/recruitCollection')">
          <img src="@/assets/img/mine2.png" alt />
          <div>收藏记录 ({{user.collect_num}})</div>
        </div>
        <div @click="to('/recruitBrowse')">
          <img src="@/assets/img/mine3.png" alt />
          <div>名片浏览记录</div>
        </div>
        <!--  -->
        <div @click="to('/infoBrowse')">
          <img src=" http://img.ilianpei.com/2020-08-19/15978181695f3cc53915f93.png " alt />
          <div>资讯浏览记录</div>
        </div>
      </div>
    </div>
    <!--  -->
    <!-- 关于我们 -->
    <div class="tube bg-ff">
      <div class="c-99 rem-32px">
        <div class="tube_li flex align-center" @click="to('/companySyn')">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">关于我们</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="stopGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">宣传片</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="stopGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">企业荣誉</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="stopGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">招商项目</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="stopGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">品牌管理</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="stopGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">资讯管理</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="stopGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">联系人</div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <!--  -->
    <div class="login text-ff rem-34px flex justify-between text-center">
      <div class="bg-ff0" @click="backlogin" style="width: 3.6rem;">退出并登录个人账户</div>
      <div class="bg-bcb word-all" @click="to('/')" style="width: 2.2rem;">链配网首页</div>
    </div>
  </div>
</template>

<script>
import cardVue from "./card.vue";
export default {
  data() {
    return {
      user: "",
      ent: ""
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#f5f5f5";
    if (!window.localStorage.getItem("qx_token")) {
      this.$router.push({
        path: "/login"
      });
    }
    this.getUser();
  },
  methods: {
    stopGo() {
      this.$toast(
        `该功能暂不支持手机端操作，请到电脑端进行管理 电脑端网址http://member.ilianpei.com/`
      );
    },
    to(path) {
      this.$router.push({
        path: path
      });
    },
    perfect() {
      if (localStorage.getItem("is_perfect") == "1") {
        this.$router.push({
          path: "/perfect"
        });
        return false;
      }
      this.$router.push({
        path: "/perfectInfo"
      });
    },
    backlogin() {
      this.$axios
        .post("/home/quitLogin", {
          token: window.localStorage.getItem("qx_token")
        })
        .then(res => {
          if (res.data.code == 0) {
            localStorage.removeItem("phone");
            localStorage.removeItem("token");
            localStorage.removeItem("user_id");
            localStorage.removeItem("qx_token");
            localStorage.removeItem("qx_phone");
            localStorage.removeItem("qx_id");
            localStorage.removeItem("vid");
            localStorage.removeItem("friend_type");
            localStorage.removeItem("is_perfect");
            this.$toast(res.data.msg);
            this.$router.push({
              path: "/recruit/mine"
            });
          }
        });
    },
    getUser() {
      this.$axios
        .post("/home/index/index", {
          token: window.localStorage.getItem("qx_token")
        })
        .then(res => {
          this.user = res.data.data;
          localStorage.setItem('qx_id', this.user.id)
        });

      this.$axios
        .post("/home/entGradename", {
          token: window.localStorage.getItem("qx_token")
        })
        .then(res => {
          if (res.data.data.end_time) {
            res.data.data.end_time = this.getDate(res.data.data.end_time);
          }
          this.ent = res.data.data;
        });
    },
    // 认证
    auth() {
      if (localStorage.getItem("is_perfect") == "1") {
        this.$toast("请先完善信息");
        return false;
      }
      if (this.ent.grade_id >= 1) {
        console.log("付费");
      } else {
        this.$router.push({
          path: "/auth",
          query: {
            type: ""
          }
        });
      }
    },
    // 时间戳转换
    getDate(time) {
      var oDate = new Date(time * 1000),
        oYear = oDate.getFullYear(),
        oMonth = oDate.getMonth() + 1,
        oDay = oDate.getDate();
      if (oMonth < 10) {
        oMonth = "0" + oMonth;
      }
      if (oDay < 10) {
        oDay = "0" + oDay;
      }
      var oTime = oYear + "-" + oMonth + "-" + oDay; //最后拼接时间
      return oTime;
    },
    // 企业名片
    qxgo() {
      this.$router.push({
        path: "/card/",
        query: {
          id: window.localStorage.getItem("qx_id")
        }
      });
    }
  }
};
</script>


<style scoped>
.auth {
  width: fit-content;
  padding: 0.1rem 0.1rem;
  box-sizing: content-box;
  background-color: #ff9900;
  text-align: center;
  border-radius: 5px;
}
.mine {
  padding-top: 0.4rem;
  background: url("../assets/img/minebg.png") no-repeat;
  background-size: 100%;
  padding-bottom: 1.6rem;
}
.header img {
  width: 1.5rem;
  height: 1.5rem;
}
.card {
  padding: 0.35rem 0.2rem;
  border-radius: 0.15rem;
  margin-top: 0.32rem;
  font-weight: bold;
}
.card .iconfont {
  font-size: 0.44rem;
  color: #f63e40;
}
.ability,
.tube {
  padding: 0.32rem;
  border-radius: 0.15rem;
}
.ability_title {
  margin-bottom: 0.56rem;
  font-weight: bold;
}
.ability img {
  width: 0.6rem;
  height: 0.66rem;
  display: inline-block;
}
.tube .iconfont {
  font-size: 0.32rem;
  margin-right: 0.1rem;
}
.tube .icon-yanjing {
  font-size: 0.26rem;
}
.tube_li {
  padding: 0.35rem 0;
}
.login {
  height: 0.9rem;
  line-height: 0.9rem;
  position: fixed;
  bottom: 0.4rem;
  width: 94%;
  justify-content: space-around;
}
.login > div {
  border-radius: 0.15rem;
}
.gn > div {
  width: 33.3%;
  margin-bottom: 0.4rem;
}
</style>
<style>
.mint-toast-text {
  line-height: 1.5 !important;
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .qx_mine {
    padding-bottom: 1.9rem !important;
  }
}
</style>